如何巧妙地解决echarts柱状图x轴溢出问题

问题来源

       博主最近在使用echarts绘制柱状图的时候，就遇到了x轴左右两边溢出的问题。相信很多小伙伴也遇到这种问题，而且最最关键的是博主找遍了网上，没找到解决方案！！！
       废话不多说，直接上图，明显看出柱状图x轴左右两边都溢出了。

What Happened？

代码分析

瞅一眼代码：

// 生成echarts实例
const mainChart = echarts.init(document.getElementById('main')); 
const series = [
        {
            data: [[0, 120], [1, 200], [2, 150], [3, 80], [4, 70], [5, 110], [6, 130]],
            type: 'bar',
            barWidth: 20
        },
        {
            data: [[0, 80], [1, 180], [2, 120], [3, 130], [4, 100], [5, 180], [6, 200]],
            type: 'bar',
            barWidth: 20
        },
        {
            data: [[0, 80], [1, 180], [2, 120], [3, 130], [4, 100], [5, 180], [6, 200]],
            type: 'bar',
            barWidth: 20
        }];
const option = {
    xAxis: {
       type: 'value', // 数值轴
       boundaryGap: true // 坐标轴两边是否留白